<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .login ,
        .noLogin {
            display: block;
        }
    </style>
     <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .banner {
            width: 400px;
            height: 300px;
            margin: auto;
            position: relative;
        }

        .banner ul li {
            width: 400px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
            position: absolute;
            top: 0;
            background-color: #f00;

            opacity: 0;
            transition: .5s;
        }
        .banner ul img {
            width: 400px;
            height: 300px;
        }

        .banner span {
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #000;
            color: #fff;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .next {
            right: 0;
        }

        ol {
            position: absolute;
            width: 100%;
            bottom: 10px;
            display: flex;
            justify-content: center;
        }

        ol li {
            width: 20px;
            height: 20px;
            background-color: #ff0;
            margin: 10px;
        }

        .banner .show{
            opacity: 1;
        }
        .banner .active{
            background-color: #0f0;
        }
    </style>
</head>
<body>

    <h1>首页</h1>
    <h2>
        <a href="./13_list.html">商品列表</a>
    </h2>

    <div class="top">
        <div class="login">欢迎XX   <span>退出登陆</span></div>
        <div class="noLogin">
            <a href="">登陆</a>
            <a href="">注册</a>
        </div>
    
    </div>


    <!-- 无缝轮播 -->
    <!-- 透明度轮播 -->
    <div class="banner">
        <ul>
            <!-- <li>
                <img src="" alt="">
            </li> -->
        </ul>
        <ol></ol>
        <span class="prev"></span>
        <span class="next"></span>
    </div>

    <script src="../js/ajax.js"></script>
    <script>

        // 判断用户是否登陆
        //    去localStorage去找

        // 退出登陆   --- 移除localStorage
        const user = localStorage.getItem('USER_LOGIN');
        if(user) {
            console.log('登陆ok');
            // 显示  login
        } else {
            console.log('没有登陆')
            // 显示 noLogin
        }


        const oUl = document.querySelector('ul');
        const oOl = document.querySelector('ol');


        // 轮播图
        ajax({
            type : 'get' ,
            path : 'http://192.168.58.110/php/banner.php' ,
            success : res => {
                
                res = JSON.parse(res);
                console.log(res);
                const {status , data} = res ;
                if(status) {
                    // 生成图片列表
                    renderImg(data);
                    
                }
                
            }
        })




        function renderImg(data) {
            // 动态生成图片列表
            let imgHTML = '' ;
            data.forEach(item => {
                console.log(item.picSrc);
                imgHTML += `
                    <li>
                        <img src="${item.picSrc}" alt="">
                    </li>
                `
            })
            oUl.innerHTML = imgHTML;
            let oImgs = oUl.querySelectorAll('li') ;
            oImgs[0].classList.add('show');

            // 生成小点列表
            let dotHTML = '' ;
            data.forEach(item => {
                dotHTML += `
                    <li></li>
                `
            })

            oOl.innerHTML = dotHTML;
            let oDots = oOl.querySelectorAll('li') ;
            oDots[0].classList.add('active');
        }



        // 




    </script>
    
</body>
</html>